<script setup lang="ts">
import { getServiceTypeList } from "~/api/goods";
import { onMounted, ref, computed } from "vue";

const emits = defineEmits(["selectType"]);
const props = defineProps({
  keyword: {
    type: String,
    default: "",
  },
  formParams: {
    type: Object,
    default: () => ({}),
  },
});

onMounted(() => {
  getTypes();
  //emits("selectType", 0);
});

watch(props.keyword, (newValue) => {
  if (typeList.value.length > 0) {
    const allTypes = getAllTypes();
    const isExist = allTypes.filter((item) => item.name.indexOf(newValue) !== -1);
    console.log(isExist);
    if (isExist.length > 0) {
      selectTypeLabel(isExist[0].id, isExist[0].name);
    }
  }
});

// 分类
interface GoodsTypeChild {
  id: number;
  name: string;
  icon: string;
  parentId: number;
  ancestors: any;
  children: any;
}

interface GoodsType {
  id: number;
  name: string;
  icon: string;
  parentId: number;
  ancestors: any;
  children: GoodsTypeChild[] | null;
}

const typeList = ref<GoodsType[]>([]);
const checkAll = ref(false);

// 获取所有类型（包括父类型和子类型）的扁平列表
const getAllTypes = () => {
  let allTypes: (GoodsType | GoodsTypeChild)[] = [];
  
  typeList.value.forEach(parentType => {
    allTypes.push(parentType);
    if (parentType.children && parentType.children.length > 0) {
      allTypes = [...allTypes, ...parentType.children];
    }
  });
  
  return allTypes;
};

const getTypes = async () => {
  try {
    const data = await getServiceTypeList();
    console.log('-------data--------', data);
    
    typeList.value = data.data || [];
    
    if (props.keyword) {
      const allTypes = getAllTypes();
      const isExist = allTypes.filter(
        (item) => item.name.indexOf(props.keyword) !== -1
      );
      if (isExist.length > 0) {
        selectTypeLabel(isExist[0].id, isExist[0].name);
      }
    }
    
    if (props.formParams.secondTypeId && props.formParams.secondTypeId.length > 0) {
      const allTypes = getAllTypes();
      const label = allTypes.find(
        (item) => item.id === props.formParams.secondTypeId[0]
      );
      if (label) {
        selectTypeLabel(props.formParams.secondTypeId[0], label.name);
      }
    }
  } catch (e) {
    console.log(e);
  }
};

const parentType = computed(() => {
  return typeList.value.filter((item) => item.parentId === 0);
});

const checkAllHandle = () => {
  checkAll.value = !checkAll.value;
};

const checkAllTypes = computed(() => {
  if (checkAll.value) return typeList.value;
  return typeList.value;
});

// 选择分类
const activeType = ref(0);
const selectTypeLabel = (id: number, label: string) => {
  // 查找选中的类型
  const allTypes = getAllTypes();
  const selectedType = allTypes.find(item => item.id === id);
  
  // 获取子类型
  let childrenType = [];
  if (selectedType) {
    if (selectedType.children) {
      childrenType = selectedType.children;
    } else {
      // 如果是子类型，查找同级的子类型
      const parentType = typeList.value.find(item => item.id === selectedType.parentId);
      if (parentType && parentType.children) {
        childrenType = parentType.children;
      }
    }
  }
  
  emits("selectType", id, label, childrenType);
  activeType.value = id;
};
</script>

<template>
  <div class="service-class">
    <div class="class-item" :class="{ 'is-expanded': checkAll }">
      <span :class="{ active: activeType === 0 }" @click="selectTypeLabel(0, '推荐')"
        >推荐</span
      >
      <span
        :class="{ active: activeType === item.id }"
        v-for="item of checkAllTypes"
        :key="item.id"
        @click="selectTypeLabel(item.id, item.name)"
        >{{ item.name }}</span
      >
    </div>
    <span class="more" @click="checkAllHandle"
      ><img src="~/assets/class-more-icon.png" alt="" />{{
        checkAll ? "收起" : "更多服务"
      }}</span
    >
  </div>
</template>

<style scoped lang="scss">
.service-class {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 1200px;
  margin: 20px auto 30px;
  gap: 20px;
  .class-item {
    flex: 1;
    overflow-y: hidden;
    max-height: 20px;
    transition: max-height 0.15s ease-in;
    &.is-expanded {
      max-height: 500px; // 设置一个最大高度，确保动画效果
    }
    span {
      color: rgba(25, 30, 40, 0.48);
      cursor: pointer;
      transition: all 0.2s;
      padding-right: 24px;
      white-space: nowrap;
      padding-bottom: 6px;
      display: inline-block;
      &:nth-child(1) {
        padding-left: 0;
      }
      &.active {
        color: #1dbf73;
      }
    }
  }

  .more {
    display: flex;
    align-items: center;
    color: #1dbf73;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
    }
  }
}
</style>
